<template>
  <div class="app-container" ref="appContainer">
    <div class="header">
      <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
        <el-form-item label="请输入联盟ID">
          <el-input v-model="inputSearch.searchId" :placeholder="`请输入联盟ID`" clearable />
        </el-form-item>
      </el-form>
      <div class="search">
        <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
      </div>
    </div>

    <!-- ------------表格--------------->
    <div class="table">
      <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
        <el-table-column label="用户ID" align="center" prop="uid" width="125px">
        </el-table-column>
        <el-table-column label="呢称" align="center" prop="nick" width="125px">
        </el-table-column>
        <el-table-column label="联盟id" align="center" prop="groupid" width="300px">
        </el-table-column>
        <!-- <el-table-column label="头像" width="90px" align="center">
          <template #default="scope">
            <el-avatar :size="80" :src="scope.row.face">
              <img src="@/assets/image/userlogo.png" />
            </el-avatar>
          </template>
        </el-table-column> -->

        <el-table-column label="邀请码" align="center" prop="code" width="100px">
        </el-table-column>

        <el-table-column label="职位" align="center" prop="position" width="100px">
        </el-table-column>
        <el-table-column label="分成比例" align="center" prop="rate" width="100px">
        </el-table-column>
        <el-table-column label="积分" align="center" prop="score" width="100px">
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100px">
        </el-table-column>

        <el-table-column label="操作" align="center" width="500px">
          <template #default="scope">
            <el-button type="success" @click="onClickZhanji(scope.row)">查看战绩</el-button>
          </template>
        </el-table-column>


      </el-table>

    </div>

    <!-- ------------分页--------------->
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
        @pagination="getList" /> -->

    <!-- ------------分页--------------->
    <div class="pagination">
      <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
        layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
        @current-change="getList" />
    </div>


    <el-dialog v-model="dialogVisible" title="玩家充值" width="80%">
      <el-form :model="chargeForm">

        <!-- <el-form-item label="用户ID">
          <el-input :value="chargeForm.id" disabled />
        </el-form-item>
        <el-form-item label="账号">
          <el-input :value="chargeForm.name" disabled />
        </el-form-item>
        <el-form-item label="呢称">
          <el-input :value="chargeForm.nick" disabled />
        </el-form-item>
        <el-form-item label="钻石">
          <el-input :value="chargeForm.gem" disabled />
        </el-form-item>

        <el-form-item label="选择充值类型">
          <el-radio-group v-model="chargeForm.type">
            <el-radio label="gem">钻石</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="输入充值数量(负数表示扣除)">
          <el-input v-model="chargeForm.num" type="number" clearable />
        </el-form-item> -->

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRechargeSubmit()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { GameConfig } from '@/config/GameConfig'
import { DateUtil } from '@/engine/util/DateUtil'
import { Base64Helper } from '@/engine/util/Base64Helper'
import { GroupInfo } from '@/store/model/GroupInfo'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
  searchId: "" + GroupInfo.instance.id,
})

//列表查询选项
const listQuery = reactive({
  pagenum: 1, //第几页
  pagesize: 10, //一页多少个
})

let list = reactive([
  {

  }
])
let pageObj = reactive({
  total: 0
})

const dialogVisible = ref(false)
const chargeForm = reactive({

})



onMounted(() => {

  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
  getList()
})


const onclickSearch = () => {
  Logger.log('onclickSearch!', inputSearch)
  let groupId: number = parseInt(inputSearch.searchId);
  if (isNaN(groupId)) {
    UIHelper.showMsg("请输入正常的id")
  } else {
    HttpClient.group_member(groupId, (data: object) => {
      loading.value = false
      let list: Array<object> = data["data"]
      formatDataList(list)
    })
  }

}

const handleSizeChange = (val: number) => {
  listQuery.pagesize = val
  getList()
}

const formatDataList = (dataList: Array<object>) => {
  list.splice(0)
  for (let i = 0; i < dataList.length; i++) {
    let data = {
      "uid": dataList[i]["uid"],
      "nick": dataList[i]["nick"],
      "agentid": dataList[i]["agentid"],
      "groupid": dataList[i]["groupid"],
      "code": dataList[i]["code"],
      "face": dataList[i]["face"],
      "pos": dataList[i]["pos"],
      "rate": dataList[i]["rate"] + "%",
      "score": dataList[i]["score"],
      "status": dataList[i]["status"],
    }

    // public pos: number;      // 0 是普通人 1是组长，2是盟主
    if (dataList[i]["status"]) {
      data["status"] = "禁止游戏"
    } else {
      data["status"] = "正常游戏"
    }
    if (dataList[i]["pos"] == 0) {
      data["position"] = "普通成员"
    } else if (dataList[i]["pos"] == 1) {
      data["position"] = "合伙人"
    }
    else if (dataList[i]["pos"] == 2) {
      data["position"] = "盟主"
    }
    list[i] = data
    list.sort((a: object, b: object) => {
      return b["pos"] - a["pos"]
    })
  }

}

const getList = () => {
  loading.value = true;
  onclickSearch()

}


const onClickCharge = (row) => {
  Logger.log("onClickCharge", row)

  dialogVisible.value = true
}

const handleRechargeSubmit = () => {
  Logger.log("handleRechargeSubmit=", chargeForm)
}

const onClickZhanji=(row)=>{
  Logger.log("onClickZhanji", row)
  GroupInfo.instance.id = row.groupid
  GroupInfo.instance.userid = row.uid
  router.push({
    path: '/router_group/group_zhanji',
  })
}




</script>
    
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
    